@import "../../common/activity/act_com";
@import "../../common/activity/pop_user";
/* bg 背景 color */
body{
  background-color: #FF9c33;
}
.container{
  display: flex;
  flex-direction: column;

}
.banner_img{
  width: 100%;
  img{
    width: 100%;
  }
}
.cut_price_msg{/* 砍价信息 */
  text-align: center;
  font-size: rem(14);
  color:#fff;
  line-height: rem(30);
}
.activity_slogan{
  display: flex;
  justify-content: center;
  h1{
    width: 80%;
    text-align: center;
    color:#fff;
    font-size: rem(20);
    line-height: rem(30);
  }
}
header{
  width: 100%;
}
main{
  flex-grow: 1;
  display: flex;
  .w{
    flex-grow: 1;
    width: 100%;
    box-sizing: border-box;
  }
}
.join_activity{
  padding: rem(15);
  background-color: #ffe4b2;
  border-radius:0 0 rem(5) rem(5);
  .activity_schedule{
    /* 活动进度 */
    border-radius: rem(10);
    height:rem(16);
    padding: rem(2);
    background-color: #FF9c33;
    display: flex;
    align-items: flex-end;
    flex-direction: row-reverse;
    position: relative;
    margin-top:rem(20);
    .schedule_status{
      background-color: #fff;
      height: 100%;
      width: 100%;
      border-radius:  0 rem(8) rem(8) 0;
    }
    .running_man{
      position: absolute;
      left: -5%;
      top: rem(-30);
      width: rem(25);
    }
  }
  .activity_schedule_word{
    color:#333;
    padding-left:rem(5);
    span{
      color:#f35625;
    }
  }
  .price_des > div{
    display: flex;
    justify-content: space-between;
    p{
      font-size: rem(16);
      color: #333;
      span{
        color:#f35625;
      }
    }
  }
  .price_des .c_price p{
    line-height: rem(40);
    font-size: rem(18);
  }

  .activity_status{/*砍价状态*/
    display: flex;
    justify-content: space-between;
    color:#fff;
    padding: 0;
    margin-top: rem(20);
    .help_cut,.want_join{
      width: rem(140);
      height: rem(40);
      background-color: #ffe4b2;
      text-align: center;
      border-radius: rem(5);
      line-height: rem(40);
      font-size: rem(20);
    }
    .want_join{
      background-image: linear-gradient(-45deg, rgba(255, 255, 255, .3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .3) 50%, rgba(255, 255, 255, .3) 75%, transparent 75%, transparent);
      background-size: 40px 40px;
      animation: progress-bar-stripes 1s linear infinite;
    }
    @keyframes progress-bar-stripes {
      from  { background-position: 0 0; }
      to    { background-position:  40px 0; }
    }
    .first_want_join,.look_for_friend{
      flex-grow: 1;
      height: rem(40);
      background-color: #fd8403;
      text-align: center;
      border-radius: rem(5);
      line-height: rem(40);
      font-size: rem(20);
      background-image: linear-gradient(-45deg, rgba(255, 255, 255, .3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .3) 50%, rgba(255, 255, 255, .3) 75%, transparent 75%, transparent);
      background-size: 40px 40px;
      animation: progress-bar-stripes 1s linear infinite;
    }
  }
  .activity_status_word{
    color:#333;
    font-size: rem(12);
    padding-left:rem(20);
  }
  .group_buy_setting{
    .group_buy_setting_detail{
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: rem(60);
      padding:0 rem(15) ;
      border-radius: rem(30);
      background-color: #fdd07e;
      margin-top:rem(15);
      box-sizing: border-box;
      position: relative;
      left:0;
      top: 0;
      .lock_mask{
        width: 100%;
        height: 100%;
        border-radius: rem(30);
        position: absolute;
        left:0;
        top:0;
        background-color: rgba(0,0,0,0.3);
      }
      .ladder-desc{
        width: rem(260);
      }
      div:first-child{
        width:1.1rem;
        background-color: #ffe4b2;
        line-height: 1.1rem;
        text-align: center;
        height: 1.1rem;
        margin-right: rem(10);
        img{
          width: rem(20);
        }
      }
      .price_lock{
        position: relative;
        left: 0;
        top: 0;
        >div{
          position: absolute;
          width: 100%;
          height: 100%;
          background-color: rgba(0,0,0,0.3);
          text-align: center;
          color:#fff;
          font-size:rem(10);
          left: 0;
          top: 0;
        }
      }
    }
  }
}
.activity_countdown{
  background-color: #ffd280;
  border-radius: rem(5) rem(5) 0 0;
  position: relative;
  left:0;
  top: 0;
  margin-top: rem(30);
  p{
    text-align: center;
    color:#333;
    line-height:rem(40);
    height:rem(40);
    font-size: rem(14);
    letter-spacing: 1px;
    .end_word{
      color:#f35625;
      padding: 0 rem(3);
    }
    .dynamic_time span{
      color:#f35625;
      padding: 0 rem(3);
    }
  }
}
.activity_des{
  background-color: #ffe4b2;
  padding: rem(0) rem(10) rem(20);
  margin-top: rem(50);
  border-radius: rem(5);
  position: relative;
  left: 0;
  top:0;
  .activity_des_title{
    position: relative;
    left: 0;
    top: rem(-28);
    margin: 0 auto;
    width:rem(110);
    text-align: center;
    height: rem(36);
    line-height: rem(36);
    background-color: #ffcb52;
    font-size: rem(16);
    color:#333;
    z-index: 2;
    h2{
      position: relative;
      z-index: 1;
    }
    h2:after,h2:before{
      content: "";
      position: absolute;
      display: block;
      border-style: solid;
      border-color: #e8b338 transparent transparent transparent;
      bottom:rem(-8);
      z-index: 4;
    }
    h2:before{
      right:rem(102);
      border-width:rem(8) 0 0 rem(8);
    }
    h2:after{
      left:rem(102);
      border-width:rem(8) rem(8) 0 0;
    }
  }
  .activity_des_title:before,.activity_des_title:after{
    content: "";
    position: absolute;
    display: block;
    top: rem(8);
    border: rem(18) solid #ffcb52;
  }
  .activity_des_title:before{
    left: rem(-40);
    //border-left-width: rem(18);
    border-right-width: rem(30);
    border-left-color: transparent;
  }
  .activity_des_title:after{
    right: rem(-40);
    border-left-width:rem(30);
    //border-right-width:rem(18);
    border-right-color: transparent;
  }
  .content_img div{
    margin-bottom: rem(10);
    width:100%;
    img{
      width: 100%;
    }
  }
}
.phb{
  /* 排行榜 */
  ul{
    display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box; /* 老版本语法: Firefox (buggy) */
    display: -ms-flexbox; /* 混合版本语法: IE 10 */
    display: -webkit-flex; /* 新版本语法: Chrome 21+ */
    display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
    justify-content: space-between;
    padding: rem(2) 0;
    li{
      width: rem(100);
    }
    li:last-child{
      flex-grow: 1;
      text-align: right;
    }
    span{
      color:#f35625;
    }
  }
}
